Component(
  {
    properties: {
      src: {
        type: String,
        value: '',
      },
    },
    observers: {
      src(val) {
        console.log('src变化 ===>', val)
        this.initSrc(val)
      },
    },
    data: {
      scene: null,
      gltfNode: null,
      helmet: null,
      rotationTimer: null,
      angle: 0,
      gltfSrc: '',
      gltfInfo: null,
    },
    methods: {
      async loadGLTF(gltfSrc) {
        const scene = this.scene
        if (gltfSrc) {
          try {
            wx.showLoading({
              title: '加载中...',
              mask: true,
            })
            await scene.assets.loadAsset({
              type: 'gltf',
              assetId: `gltf-load`,
              src: gltfSrc,
            })
            wx.hideLoading()
          }
          catch (e) {
            wx.hideLoading()
            wx.showToast({
              icon: 'error',
              title: '模型加载异常',
            })
            console.log('动态加载模型异常 ===>', e)
          }

          this.setData({
            gltfInfo: 'gltf-load',
          })
        }
      },
      initSrc(src) {
        // this.loadGLTF(src)
        this.setData({
          gltfSrc: src,
        })
      },
      handleReady(res) {
        console.log('加载完成 ===>', res)
        this.scene = res.detail.value
        const xrFrameSystem = wx.getXrFrameSystem()
        this.helmet = { el: this.scene.getElementById('gltf'), color: 'rgba(44, 44, 44, 0.5)' }
        console.log('this.gltfSrc ===>', this.src, this.data.src)
        if (this.data.gltfSrc) {
          this.loadGLTF(this.data.gltfSrc)
        }
      },
      handleGLTFLoaded() {
        console.log('模型加载完成 ===>', this.helmet)
      },
    },
  },
)
